import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Page from './components/page';
import MyButton from './components/MyButton';
import Components1 from './components/components1';
import Components2 from './components/components2';
import Game from './components/game/game';

function App() {
  const [ visiable1, setVisiable1 ] = useState(false)
  const [count, setCount] = useState(1)
  function handleChangeComponentsShow() {
    setVisiable1(!visiable1)
  }

  const products = [
    { title: 'Cabbage', id: 1 },
    { title: 'Garlic', id: 2 },
    { title: 'Apple', id: 3 },
  ]





  return (
    <>
      {/* <MyButton/>
      <Page/>

      <button onClick={handleChangeComponentsShow}>切换组件{visiable1}</button>
      {
        visiable1 ? <Components1 count={count}/> : <Components2/>
      }
      {
        visiable1 && <Components1/>
      }
      {
        products.map((value)=> {
          return <div key={value.id}>{value.title + '----' + value.id}</div>
        })
      } */}
      <Game/>
    </>
  )
}

export default App
